<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 800px;
            height: 800px;
            background-color: silver;
            overflow: hidden;
        }

        .box1 div {
            width: 100px;
            height: 100px;
          
            margin-bottom: 100px;
            margin-left: 0;
        }

        .box2 {
            background-color: #bfa;
            /* 设置动画 */
            /* animation-name: unset;要对当前元素生效的关键帧的名字 */
          

            /* animation-duration  动画的执行时间 */
          
            /* animation-delay  动画的延迟 */
            /* animation-delay: 2s; */

            /* animation-timing-function: ease-in-out; */

            /* animation-iteration-count: ;动画的执行次数
                 可选值
                    infinite  无限执行
             */
          
           /* animation-direction: normal; 
               指定动画的运行方向
                 normal  默认值  从from到to运行
                 reverse   从to向from运行每次都是这样
                 alternate   从from向to 来回循环运动
                 alternate-reverse  从to向from运动  然后来回运动
              */
            
              /* animation-play-state: running; 奢姿动画的执行状态
                     可选值
                      running  默认值 动画执行
                       paused  动画暂停
                       */


              /* animation-fill-mode: none; 动画的填充效果
               可选值
               none 默认值 动画执行完毕元素回到原来的位置
               forwards  动画执行完毕，元素停止在袁术移动后的位置
               backwards  动画执行等待时，原宿九号处于开始位置
               both         延迟元素停在from位置，结束元素停在结束位置

               */
           
           animation: test 2s infinite 1s ;





        }

/* 
        .box1:hover div {           
            margin-left: 700px;
        } */
        /* 动画和过渡类似
              过渡要在属性发生改变后才会触发
             
              设置动画效果，必须要设置一个关键帧（关键帧设置了动画执行每一个步骤）

         */

         @keyframes test {
             /* from表示动画的开始位置,，也可以使用0% */
             from{
                 margin-left: 0;
             }

             /* to表示动画的结束位置,，也可以使用100% */
             to{
                 margin-left: 700px;
             }
         }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
        <!-- <div class="box3"></div> -->
    </div>
</body>

</html>